{% import "macros/head.html" as head %}
{% import "macros/utilities/search.html" as search %}
{% import "macros/sidebar.html" as sidebar %}
{% import "macros/header.html" as header %}
{% import "macros/footer.html" as footer %}
{% import "macros/utilities/seo.html" as seo %}


<!DOCTYPE html>
<html lang="{{ config.default_language }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{%- block title -%}{%- endblock title -%}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">
  <link rel="stylesheet" href="{{ get_url(path='assets/css/custom.css') | safe }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
  {%- if config.extra.favicon -%}
    <link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path = 'images/favicon/apple-touch-icon.png') | safe }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path = 'images/favicon/favicon-32x32.png') | safe }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path = 'images/favicon/favicon-16x16.png') | safe }}">
    <link rel="manifest" href="{{ get_url(path = 'images/favicon/site.webmanifest') | safe }}">
    <link rel="mask-icon" href="{{ get_url(path = 'images/favicon/safari-pinned-tab.svg') | safe }}" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#ffffff">
  {%- endif -%}
  {%- block head -%}{%- endblock head -%}
  {{ seo::google_search_console() }}
  {{ seo::google_analytics() }}
</head>
<body>
  <div class="container-fluid vh-100">
    <div class="row h-100">
      {%- block sidebar -%}{%- endblock sidebar -%}
      <div class="col mh-100 overflow-auto px-0">
        {%- block header -%}{%- endblock header -%}
        <div class="d-flex flex-column h-100">
          {%- block content -%}{%- endblock content -%}

          {%- block comments -%}{%- endblock comments -%}

          {{ footer::footer() }}
        </div>
      </div>
    </div>
  </div>
  {{ sidebar::offcanvas_sidebar() }}
  {{ search::search_modal() }}
  <script src="{{ get_url(path = 'assets/js/bootstrap/bootstrap.bundle.min.js') | safe }}"></script>
  <script>
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
    const myModal = document.getElementById('searchModal');
    const myInput = document.getElementById('searchInput');

    myModal.addEventListener('shown.bs.modal', () => {
      myInput.focus()
    });
  </script>
  {{ search::search_js(lang = config.default_language) }}
</body>
</html>